<template>
  <div :class="$store.state.appPrefix + '-c-device-monitor-chart'">
     <div class="c-device-monitor-chart-title">学校数量</div>
    <div ref="deviceMonitorChart" class="c-device-monitor-chart-main"></div>
  </div>
</template>

<script>
/* global echarts */

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true,
    },
    infos: {
      type: Array | String,
      default: () => []
    }
  },
  data() {
    return {
      statDetailData: {},
      echartIns: null,
    }
  },
  watch: {
    infos: {
      handler() {
        this.$nextTick(() => {
          this.initDeviceCharts(this.infos)
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    initDeviceCharts(data) {
      if (!this.echartIns) {
        const el = this.$refs.deviceMonitorChart;
        this.echartIns = echarts.init(el);
      }
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: data.map(item => item.orgName),
            axisLine: {
              show: true,
              lineStyle: {
                color: '#D9D9D9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.65)'
            }
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#e8e8e8'
              }
            },
            axisLabel: {
              color: 'rgba(0, 0, 0, 0.65)'
            }
          },
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barMaxWidth: 20,
            data: data.map(item => item.num),
          },
        ],
      }
      this.echartIns.setOption(options);
    },
    resizeHandler() {
      if (this.echartIns) {
        this.echartIns.resize()
      }
    },
  },
  mounted() {
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
    if (this.echartIns) {
      this.echartIns.dispose()
    }
  }
}
</script>
